<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>标签分类</title>
        <style>
        /* 解决span之间的空格方法 */
        /* body {
            font-size: 0;
        } */

        #box1,
        #box2 {
            /* width: 100px; */
            height: 100px;
            background: red;
        }

        #content1,
        #content2 {
            width: 100px;
            height: 100px;
            background: red;
            font-size: 20px;
        }

        input {
            width: 100px;
            height: 20px;
        }
        img{width: 100px;height: 100px;}
    </style>
    </head>

    <body>
        <!-- <div id="box1">块1</div>
    <div id="box2">块2</div> -->
        <!-- <span id="content1">内联1</span>
    <span id="content2">3.不写宽的时候,跟父元素的宽相同</span>
    <input type="text">
    <input type="text" value=""> -->
        <!-- 替换元素 -->
        <img src="./images/jj20.jpg" alt="">
        <input type="checkbox">
        <!-- 非替换元素 -->
        <h1>标题</h1>
    </body>

</html>